import React, { useState } from 'react'
import { Avatar, Button, Table, Tag, Form, DatePicker, Select, Row, Col, Modal, Input, InputNumber } from 'antd'
import { UserOutlined } from '@ant-design/icons';
const { RangePicker } = DatePicker
const { Option } = Select
const { TextArea } = Input
import request from '@/utils/request'

export default (props: any) => {
    const { memberInfo } = props
    const [tableData, setTableData] = useState({ list: [] })
    const [modal, setModal] = useState({ visable: false, title: '' })

    const [searchForm] = Form.useForm()
    const [form] = Form.useForm()

    const columns: any = [
        {
            title: '账户类型',
            dataIndex: 'account_type',
        },
        {
            title: '数据金额',
            dataIndex: 'amount',
        },
        {
            title: '发生方式',
            render: (text: any) => <Tag color="cyan"> 暂无等级 </Tag>,
            dataIndex: 'appear_way',

        },
        {
            title: '备注',
            dataIndex: 'remark',
        },

        {
            title: '发生时间',
            dataIndex: 'balance',
        }
    ];

    const onSearchFinish = (values: any) => {
        // request(``).then((result) => {
        //     if (result.code === 200) {
               
        //     }
        // })
    }
    const onFinish = (values: any) => {
        // request(``).then((result) => {
        //     if (result.code === 200) {
               
        //     }
        // })
    }

    const changeNum = (title: string) => {
        setModal({ ...modal, visable: true, title })
    }
    return (

        <div style={{ padding: "10px" }}>
            <ul style={{ display: "flex" }}>
                <li style={{ flex: 1, display: "flex", alignItems: "center" }}>
                    <Avatar size={64} icon={<UserOutlined />} />
                    <div style={{ marginLeft: "8px" }}>
                        <div>
                            <span style={{ fontWeight: "bold" }}>用户名：</span>
                            <span style={{ color: "#898989" }}>{memberInfo.username}</span>
                        </div>
                        <div>
                            <span style={{ fontWeight: "bold" }}>手机号：</span>
                            <span style={{ color: "#898989" }}>{memberInfo.mobile}</span>
                        </div>
                    </div>
                </li>
                <li style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "center" }}>
                    <div>
                        <span style={{ fontWeight: "bold" }}>昵称：</span>
                        <span style={{ color: "#898989" }}>{memberInfo.nickname}</span>
                    </div>
                    <div>
                        <span style={{ fontWeight: "bold" }}>邮箱：</span>
                        <span style={{ color: "#898989" }}>{memberInfo.email}</span>
                    </div>
                </li>
                {/* <li style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "center" }}>
                        <div>
                            <span style={{ fontWeight: "bold" }}>真实姓名：</span>
                            <span style={{ color: "#898989" }}>郭郭聪</span>
                        </div>
                        <div>
                            <span style={{ fontWeight: "bold" }}>注册时间：</span>
                            <span style={{ color: "#898989" }}>2020-04-13 10:06:31</span>
                        </div>
                    </li> */}
            </ul>


            <div style={{ padding: "10px 60px" }}>
                <div style={{ padding: "10px 0" }}>积分： <span>10.00</span><Button style={{ marginLeft: "50px" }} onClick={() => changeNum('积分')}>调整</Button> </div>
                <div style={{ padding: "10px 0" }}>余额： <span>10.00</span><Button style={{ marginLeft: "50px" }} onClick={() => changeNum('余额')}>调整</Button></div>
                <div style={{ padding: "10px 0" }}>成长值 <span>10.00</span><Button style={{ marginLeft: "50px" }} onClick={() => changeNum('成长值')}>调整</Button> </div>
            </div>

            <div style={{ padding: "30px 40px 10px", border: "1px solid #f1f1f1" }}>
                <Form
                    onFinish={onSearchFinish}
                    initialValues={{
                        account_type: 0,
                        origin_type: 0
                    }}
                    form={searchForm}
                >
                    <Row gutter={16}>
                        <Col span={4}>
                            <Form.Item label="账户类型" name="account_type">
                                <Select>
                                    <Option value={0}>全部</Option>
                                    <Option value={1}>积分</Option>
                                    <Option value={2}>余额</Option>
                                    <Option value={3}>成长值</Option>
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={4}>
                            <Form.Item label="来源类型" name="origin_type">
                                <Select>
                                    <Option value={0}>全部</Option>
                                </Select>
                            </Form.Item>
                        </Col>
                    </Row>

                    <Form.Item label="发生时间" name="register_date">
                        <RangePicker />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" style={{ marginLeft: "69px" }}>筛选</Button>
                        <Button onClick={() => { }} style={{ marginLeft: "5px" }}>重置</Button>
                    </Form.Item>
                </Form>
            </div>
            <Table
                rowKey="id"
                dataSource={tableData.list}
                columns={columns}
            />
            <Modal
                title={`调整${modal.title}`}
                visible={modal.visable}
                onOk={() => {

                }}
                onCancel={() => setModal({ ...modal, visable: false })}
            >
                <Form
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 18 }}
                    form={form}
                    onFinish={onFinish}
                >
                    <Form.Item label={`当前${modal.title}`}>
                        10.00
                    </Form.Item>
                    <Form.Item label="调整数额" help="调整数额与当前值相加不能小于0，可保留两位小数">
                        <InputNumber />
                    </Form.Item>
                    <Form.Item label="备注">
                        <TextArea rows={3} />
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}